<template>
  <div class="all">
    <header class="">
      <div class="div" @click="goBack()">
        <img src="../../../assets/返回.png" alt="">
        <span>返回</span>
      </div>
      <div class="div">
        <span>团队业务处理</span>
      </div>
      <div class="div"></div>
    </header>
    <ul>
      <li v-for="(item, index) in mainMenuList" :key="index" @click="jump(item.MENU_URL, item)">
        <img :src="item.MENU_ICON" alt="">
        <span>{{item.MENU_NAME}}</span>
      </li>
    </ul>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="mainMenuList.length <= 0"
      class="custom-image"
      :image="require('../../../assets/空两本书.png')"
      description="暂无团队业务处理"
    />
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'TeamMenu',
  data () {
    return {
      mainMenuList: [],
      userid: this.$route.query.userid,
      team_id: this.$route.query.team_id
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.getMenu()
  },
  methods: {
    // 点击菜单跳转
    jump (url, item) {
      if (url !== '#') {
        if (url.split('/')[0] === ':CLIENT') {
          if (sessionStorage.getItem('sys') === 'ANDROID') {
            var ff = url.split('/')[1]
            window.WebViewJavascriptBridge.callHandler(ff, {'param': ''}, function (responseData) {})
          } else {
            Toast('请在App上使用本功能')
          }
        } else {
          // 跳转1
          window.location.href = url + '&team_id=' + this.team_id
        }
      } else {
        Toast('功能正在开发中，敬请期待...')
      }
    },
    // 返回
    goBack () {
      this.$router.go(-1)
    },
    // 获取菜单
    getMenu () {
      this.$http.getMenus({USER_ID: this.userid, team_id: Number(this.team_id)})
        .then(res => {
          console.log(res)
          this.mainMenuList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
header{
  width: 100%;
  height: 12vw;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1DA4F2;
  background: #FFFFFF;
  position: sticky;
  top: 0;
  border-bottom: 1px solid #E5E5E5;
}
header img{
  width: 7px;
  height: 13px;
  margin: 0 5px 0 15px;
}
header div{
  width: 33%;
  display: flex;
  align-items: center;
}
.div:nth-child(2){
  justify-content: center;
  color: #333333;
}
.content{
  overflow: auto;
  padding: 10px 0;
  box-sizing: border-box;
}
ul {
  width: 100%;
  height: auto;
  background: #fff;
  /*background: linear-gradient(90deg, #1DA3F2 , #1DC7F2 );*/
  /*margin-top: 10px;*/
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
ul li{
  width: 25%;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
ul li img{
  width: 28px;
  height: 28px;
  margin-bottom: 5px;
}
.title1{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  background: #ffffff;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin: 0 8px 0 15px;
}
.pwdInp{
  width: 80%;
  height: 40px;
  margin: 20px 10%;
  /*margin: 10px 15%;*/
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #1DA4F2;
  box-sizing: border-box;
}
.pwdInp:focus{
  border-color: #1DA4F2;
}
</style>
